<template>
  <div class="new_site">
    <!-- 头部标题 -->
    <header class="header">
      <router-link to="/myCommodity/site" tag="div" class="header__left" >
        <img src="./icon/back.png" alt="">
      </router-link>
      <span>新增地址</span>
    </header>
    <!-- 新增的信息 -->
    <div class="add__site">
      <input v-model="name" type="text" placeholder="姓名" ref="names">
      <input v-model="phone" type="text" placeholder="手机号码" maxlength="11" ref="phone">
      <div @click="selectAddress">{{City}}</div>
      <input v-model="shippingAddress" type="text" placeholder="详细地址，如街道、楼盘号等">
    </div>
    <!-- 设置默认地址 -->
    <div class="default">
      <van-checkbox v-model="checked"></van-checkbox>
      <span>设为默认地址</span>
    </div>

    <!-- 确定和取消 -->
    <div class="btn">
      <span class="cancel">取消</span>
      <span @click="addsiteList">确定</span>
    </div>

    <van-popup v-model="show" position="bottom" :overlay="true">
      <van-area :area-list="areaList"
                :columns-num="3"
                @confirm="SelectCity"
                @cancel=" show = false" />
    </van-popup>
  </div>

</template>

<script>
import siteList from './site'
import {mapMutations} from 'vuex'
export default {
  name: 'new_site',
  data() {
    return {
      areaList: siteList,
      checked: true,
      name: '',
      phone: '',
      shippingAddress: '',
      City: '省份、城市、区县',
      show: false,
      siteList:[]
    }
  },
  methods: {
    ...mapMutations({
      pushList: 'site/pushList'
    }),
    selectAddress() {
      this.show = true;
    },
    SelectCity(value) {
      this.City = value[0].name + '-' + value[1].name + '-' + value[2].name;
      this.show = false;
    },
    addsiteList() {
      if (this.name.length === 0 || this.phone.length === 0 || this.shippingAddress.length === 0 || this.City === '省份、城市、区县') {
        this.$notify('请填写完整收货信息!');
      } else {
        let arr = {};
        arr['name'] = this.name;
        arr['phone'] = this.phone;
        arr['shippingAddress'] =  this.City.replace(/-/g,'') + this.shippingAddress;
        arr['default'] = this.checked;
        this.pushList(arr);
        this.$router.replace('/myCommodity/site')
      }
    }
  },
  created() {
    this.$bus.$on('site', (site) =>{
      console.log(this.$refs.names.value);
    })
  }
}
</script>

<style lang="scss">
  .new_site{
    width: 100vw;
    height: 100vh;
    background-color: #f4f4f4;
    position: relative;
    .header{
      font-size: 50px;
      font-weight: bolder;
      line-height: 130px;
      display: flex;
      align-items: center;
      text-align: center;
      position: relative;
      border-bottom: 1px solid #ccc;
      background-color: #ffffff;
      .header__left{
        position: absolute;
        left: 34px;
      }
      img{
        width: 54px;
        object-fit: contain;
      }
      span{
        flex: 1;
      }
    }
    .add__site{
      border-bottom: 1px solid #ccc;
      padding-left: 50px;
      background-color: #ffffff;
      font-size: 44px;
      input{
        width: 100%;
        border: none;
        outline: none;
        line-height: 180px;
        border-bottom: 1px solid #ccc;
        color: #777;
        text-indent: 0.25em;
      }
      div{
        line-height: 180px;
        border-bottom: 1px solid #ccc;
        background-color: #ffffff;
        color: #777;
        text-indent: 0.25em;
      }
    }
    .default{
      font-size: 40px;
      display: flex;
      line-height: 158px;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #ccc;
      background-color: #fafafa;
      .van-icon-success{
        background-color: #cb332d;
        border: #cb332d;
        margin-right: 28px;
      }
    }
    .btn{
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      line-height: 160px;
      text-align: center;
      font-size: 42px;
      span{
        flex: 1;
        background-color: #e1473f;
      }
      .cancel{
        background-color: #ffffff;
      }
    }
    .van-popup{
      height: 1000px;
    }
  }
  .van-notify{
    line-height: 100px;
  }

</style>
